<template>
  <div class="page-container">
    <Navbar />
    <router-link to="/admin" class="nav-item">仪表盘</router-link>
    <router-link to="/restaurants" class="nav-item">餐厅管理</router-link>
    <router-link to="/dishes" class="nav-item">菜品管理</router-link>
    <main class="main-content">
      <div class="header-section">
        <h1 class="page-title">餐厅管理</h1>
        <button class="primary-btn" @click="showCreateDialog">
          + 创建新餐厅
        </button>
      </div>

      <div class="table-container">
        <table class="styled-table" v-if="restaurants.length">
          <thead>
            <tr>
              <th>餐厅名称</th>
              <th>餐厅地址</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="restaurant in restaurants" :key="restaurant.id">
              <td>{{ restaurant.name }}</td>
              <td>{{ restaurant.address }}</td>
              <td>
                <button class="action-btn" @click="handleEdit(restaurant)">编辑</button>
                <button class="danger-btn" @click="handleDelete(restaurant.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-else class="empty-state">
          暂无餐厅数据
        </div>
      </div>

      <!-- 创建弹窗 -->
      <div v-if="createDialogVisible" class="modal-overlay">
        <div class="modal-container">
          <div class="modal-header">
            <h3>创建餐厅</h3>
            <button class="close-btn" @click="createDialogVisible = false">&times;</button>
          </div>
          <form @submit.prevent="handleCreate">
            <div class="form-group">
              <label>餐厅名称</label>
              <input 
                v-model="form.name" 
                type="text" 
                required
                placeholder="请输入餐厅名称"
              >
            </div>
            <div class="form-group">
              <label>餐厅地址</label>
              <input 
                v-model="form.address" 
                type="text" 
                required
                placeholder="请输入详细地址"
              >
            </div>
            <div class="form-actions">
              <button type="button" class="secondary-btn" @click="createDialogVisible = false">取消</button>
              <button type="submit" class="primary-btn">确定创建</button>
            </div>
          </form>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import Navbar from '../Common/Navbar.vue'
import { ref, reactive, onMounted } from 'vue'
import { getRestaurants, createRestaurant } from '@/api/index.js'
import { ElMessage } from 'element-plus'

const restaurants = ref([])
const createDialogVisible = ref(false)
const form = ref({ name: '', address: '' })
const rules = ref({
  name: [{ required: true, message: '请输入餐厅名称', trigger: 'blur' }],
  address: [{ required: true, message: '请输入餐厅地址', trigger: 'blur' }]
})

onMounted(async () => {
  const res = await getRestaurants()
  restaurants.value = res.data
  console.log('餐厅数据:', restaurants.value)
})

const handleCreate = async () => {
  try {
    const res = await createRestaurant(form.value)
    if (res.success) {
      ElMessage.success('餐厅创建成功')
      createDialogVisible.value = false
      const res = await getRestaurants()
      restaurants.value = res
    } else {
      ElMessage.error(res.message)
    }
  } catch (error) {
    ElMessage.error('创建餐厅失败，请检查网络')
  }
}

const showCreateDialog = () => {
  form.value = { name: '', address: '' }
  createDialogVisible.value = true
}

const handleEdit = (row) => {
  // 编辑逻辑，此处简单示例，可根据实际接口完善
  console.log('编辑餐厅:', row)
}

const handleDelete = async (id) => {
  // 假设后端有删除接口，此处补充示例逻辑
  try {
    const res = await deleteRestaurant(id) // 假设的删除接口
    if (res.success) {
      ElMessage.success('餐厅删除成功')
      const res = await getRestaurants()
      restaurants.value = res
    } else {
      ElMessage.error(res.message)
    }
  } catch (error) {
    ElMessage.error('删除餐厅失败，请检查网络')
  }
}
</script>

<style scoped>
.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  
  th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
  }
  
  th {
    background: #f8fafc;
    font-weight: 600;
  }
  
  tr:hover {
    background: #f8fafc;
  }
}

.action-btn {
  background: #4f46e5;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.danger-btn {
  background: #ef4444;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-container {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
}

.form-group {
  margin-bottom: 1rem;
  
  label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}
</style>